import React, { useEffect, useState } from 'react';
import ColorSelector from '../ColorSelector/ColorSelector';
import './StickyHeader.css';

const StickyHeader: React.FC = () => {
    const [isSticky, setSticky] = useState(false);

    const handleScroll = () => {
        // 判断滚动位置
        if (window.scrollY > 0) {
            setSticky(true);
        } else {
            setSticky(false);
        }
    };

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    return (
        <div className={`header ${isSticky ? 'sticky' : ''}`}>
            <ColorSelector />
        </div>
    );
};

export default StickyHeader;